<template>
  <div class="discovery-container clearfix">
    <!-- 轮播图 -->
    <el-carousel :interval="4000" class="banner-carousel" type="card">
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <img :src="$utils.genImgUrl(banner.imageUrl, 1000, 400)" class="banner-img" />
      </el-carousel-item>
    </el-carousel>

    <!-- 推荐歌单 -->
    <div class="recommend" v-if="playList.length">
      <Title>推荐歌单</Title>
      <div class="playlist-wrap">
        <PlaylistCard :desc="item.copywriter" :id="item.id" :img="item.picUrl" :name="item.name" v-for="(item, index) in playList" :key="index" />
      </div>
    </div>

    <!-- 最新音乐 -->
    <div class="new-songs" v-if="newSongs.length">
      <Title>最新音乐</Title>
      <div class="new-songs-wrap">
        <div :key="listIndex" class="new-songs-list" v-for="(newSongList, listIndex) in newSongs">
          <div class="song-card" :key="item.id" v-for="(item, index) in newSongList" @click="onClickSong(listIndex, index)">
            <div class="song-order-wrap">
              <span class="song-order">{{ $utils.pad(getSongOrder(listIndex, index)) }}</span>
            </div>
            <div class="song-img-wrap">
              <img v-lazy="$utils.genImgUrl(item.img, 120)" />
              <PlayIcon class="play-icon" />
            </div>
            <div class="song-content">
              <p class="song-name">{{ item.name }}</p>
              <p class="song-singer">{{ item.artistsText }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐MV -->
    <div class="new-mvs" v-if="mvs.length">
      <Title>推荐MV</Title>
      <ul class="mvs-list-wrap">
        <li :key="mv.id" class="mvs-list-item" v-for="mv in mvs" @click="toMv(mv.id)">
          <MvCard :author="mv.artistName" :id="mv.id" :img="mv.picUrl" :name="mv.name" :playCount="mv.playCount" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getBanner, getPersonalizedPlaylist, getPersonalizedNewsong, getPersonalizedMv, getSongDetail } from 'network/request'
import { mapMutations, mapActions } from '@/store/helper/music'
export default {
  data() {
    return {
      // 轮播图
      banners: [],
      // 推荐歌单
      playList: [],
      // 二维数组最新歌曲
      newSongs: [],
      // 一维数组最新歌曲
      normalizedSongs: [],
      mvs: []
    }
  },
  async created() {
    // 获取轮播图数据
    const { banners } = await getBanner({ clientType: 'pc' })
    this.banners = banners

    // 获取推荐歌单
    const { result: playList } = await getPersonalizedPlaylist({ limit: '10' })
    this.playList = playList

    // 获取最新歌曲
    const { result: newSongsRet } = await getPersonalizedNewsong({ type: 'recommend' })
    // 获取歌单详情
    const newSongs = await this._getPlaylistDetail(newSongsRet.map(x => x.id))
    this.normalizedSongs = newSongs
    this.newSongs = [newSongs.slice(0, 5), newSongs.slice(5, 10)]

    // 获取推荐MV
    const { result: mvs } = await getPersonalizedMv()
    this.mvs = mvs
  },
  methods: {
    // 获取歌单详情
    async _getPlaylistDetail(trackIds) {
      let params = this.$utils.songDetailParams(trackIds)
      const { songs } = await getSongDetail(params)
      return songs.map(x => this.$utils.createSong(x))
    },
    onClickSong(listIndex, index) {
      // 这里因为getSongOrder是从1开始显示, 所以当做数组下标需要减一
      const nomalizedSongIndex = this.getSongOrder(listIndex, index) - 1
      const nomalizedSong = this.normalizedSongs[nomalizedSongIndex]
      this.startSong(nomalizedSong)
      this.setPlaylist(this.normalizedSongs)
    },
    getSongOrder(listIndex, index) {
      return listIndex * 5 + index + 1
    },
    toMv(id) {
      this.$router.push(`/mv/${id}`)
    },
    ...mapMutations(['setPlaylist']),
    ...mapActions(['startSong'])
  }
}
</script>
<style lang='scss' scoped>
.discovery-container {
  padding: 18px 32px;

  .banner-carousel {
    /deep/.el-carousel__container {
      height: 200px;
    }

    .banner-img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }

  .playlist-wrap {
    margin: 0 -4px;
    display: flex;
    flex-wrap: wrap;
  }

  .new-songs {
    margin-bottom: 36px;
    .new-songs-wrap {
      display: flex;

      .new-songs-list {
        flex: 1;
        overflow: hidden;

        .song-card {
          display: flex;
          padding: 8px;
          font-size: $font-size-sm;
          cursor: pointer;

          div {
            flex-shrink: 0;
          }

          &:hover {
            background: var(--light-bgcolor);
          }
          .song-order-wrap {
            @include flex-center();
            width: 30px;
            margin-right: 8px;
          }

          .song-img-wrap {
            position: relative;
            width: 60px;
            height: 60px;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
            }

            .play-icon {
              @include abs-center;
            }
          }

          .song-content {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            flex: 1;
            overflow: hidden;

            .song-name {
              @include text-ellipsis;
              color: var(--font-color-white);
            }

            .song-singer {
              @include text-ellipsis;
            }
          }
        }
      }
    }
  }

  .new-mvs {
    .mvs-list-wrap {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -12px;

      .mvs-list-item {
        width: 25%;
        margin-bottom: 36px;
        padding: 0 12px;
      }
    }
  }
}
</style>
